<?php
/**
 * Created by PhpStorm.
 * User: xyzhao
 * Date: 17-7-28
 * Time: 下午11:13
 */ ?>
<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>升华网员工OA系统</title>
	<link rel="icon" href="<?php echo STC_RES ?>stuff/img/favicon.ico">
	<!--Upgrade your browser-->
	<!--[if lte IE 10]>
	<script>
		window.location.href = 'https://support.dmeng.net/upgrade-your-browser.html?referrer=' + location.href;
	</script>
	<![endif]-->
	<!-- Bootstrap -->
	<link href="<?php echo LIB_RES ?>bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<!-- toastr -->
	<link href="<?php echo LIB_RES ?>toastr/toastr.min.css" rel="stylesheet">
	<!-- Font Awesome -->
	<link rel="stylesheet" href="<?php echo LIB_RES ?>font-awesome/css/font-awesome.css">
	<!-- Hui-iconfont -->
	<link rel="stylesheet" href="<?php echo LIB_RES ?>Hui-iconfont/iconfont.css">
	<!-- AdminLTE -->
	<link rel="stylesheet" href="<?php echo LIB_RES ?>AdminLTE/css/AdminLTE.css">
	<link rel="stylesheet" href="<?php echo LIB_RES ?>AdminLTE/css/skins/skin-blue.css">
	<!-- Myself -->

</head>

<body class="hold-transition skin-blue sidebar-mini" oncontextmenu="return false;">
<noscript>
	<h2 style="color: #FFFFFF;text-align: center;">
		对不起，你的浏览器不支持或者禁用了脚本功能
		<br/>网页无法正常工作,请您更换浏览器或开启脚本
	</h2>
</noscript>

<div class="wrapper">
	<!-- 顶部栏 -->
	<header class="main-header">
		<!-- 左侧 Logo -->
		<a href="" class="logo">
			<!-- 小Logo 在缩小时使用 -->
			<span class="logo-mini"><img src="<?php echo STC_RES ?>stuff/img/favicon.ico"> </span>
			<!-- 大Logo -->
			<span class="logo-lg"><img src="<?php echo STC_RES ?>stuff/img/favicon.ico">中南大学升华网</span>
		</a>
		<!-- 顶部导航栏 -->
		<nav class="navbar navbar-static-top" role="navigation">
			<!-- Sidebar toggle button-->
			<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
				<span class="sr-only">侧边栏</span>
			</a>
			<!-- 导航栏右侧 -->
			<div class="navbar-custom-menu">
				<ul class="nav navbar-nav">
					<!-- 用户菜单 -->
					<li class="dropdown user user-menu">
						<!-- 菜单切换按钮 -->
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="right: 4em">
							<!-- 导航栏小头像 -->
							<img src="{$self.qqimg}" class="user-image"
							     alt="User Image">
							<!-- 导航栏小介绍 -->
							<span class="hidden-xs">{$self.name}</span>
						</a>
						<ul class="dropdown-menu">
							<!-- 菜单内头像 -->
							<li class="user-header">
								<img src="{$self.qqimg}" class="img-circle"
								     alt="User Image">
								<p>
									{$self.name}
									<small>{$self.branch} {$self.position}</small>
								</p>

							</li>
							<!-- 菜单项 -->
							<li class="user-body">
								<div class="row">
									<div class="col-xs-4 text-center">
										<a href="#">Followers</a>
									</div>
									<div class="col-xs-4 text-center">
										<a href="#">Sales</a>
									</div>
									<div class="col-xs-4 text-center">
										<a href="#">Friends</a>
									</div>
								</div>
							</li>
							<!-- 菜单底部 -->
							<li class="user-footer">
								<div class="pull-left">
									<a href="#" class="btn btn-default btn-flat">Profile</a>
								</div>
								<div class="pull-right">
									<a href="#" class="btn btn-default btn-flat">Sign out</a>
								</div>
							</li>
						</ul>
					</li>
					<!-- 控制栏切换按钮 -->
					<li>
						<!--						<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>-->
					</li>
				</ul>
			</div>
		</nav>
	</header>

	<!-- 左边栏 -->
	<aside class="main-sidebar">
		<!-- 侧边栏 -->
		<section class="sidebar">
			<!-- 用户信息 -->
			<div class="user-panel">
				<div class="pull-left image">
					<img src="{$self.qqimg}" class="img-circle"
					     alt="User Image">
				</div>
				<div class="pull-left info">
					<!--<br/>-->
					<p>{$self.name}</p>
					<!-- 状态 -->
					<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
				</div>
			</div>

			<!-- 搜索框 -->
			<!--			<form action="#" method="get" class="sidebar-form">-->
			<!--				<div class="input-group">-->
			<!--					<input type="text" name="q" class="form-control" placeholder="Search...">-->
			<!--					<span class="input-group-btn">-->
			<!--              <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i-->
			<!--			              class="fa fa-search"></i>-->
			<!--              </button>-->
			<!--            </span>-->
			<!--				</div>-->
			<!--			</form>-->
			<!-- /.search form -->

			<!-- 侧边栏主菜单 -->
			<ul class="sidebar-menu" data-widget="tree">
				<li class="header">盛世升华网 服务中南人</li>
				<!-- 左侧菜单 可以加入icon -->
				<?php
				foreach ($self['authority'] as $key => $value) {
					if (is_array($value)) {
						echo '<li class="treeview">
				<a href="#"><i class="fa fa-link"></i> <span>' . $key . '</span>
					<span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
				</a>
				<ul class="treeview-menu">';
						foreach ($value as $item) {
							echo '<li><a href="#">' . $item . '</a></li>';
						}
						echo '</ul>
			</li>';
					} else {
						echo '<li><a href="#"><i class="fa fa-link"></i><span>' . $value . '</span></a></li>';
					}
				}
				?>
			</ul>
		</section>
	</aside>
	<!-- 中间内容 -->
	<div class="content-wrapper">
		<!-- 页面头 -->
		<section class="content-header">
			<h1>
				员工管理
				<small>员工列表</small>
			</h1>
			<ol class="breadcrumb">
				<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
				<li class="active">Here</li>
			</ol>
		</section>
		<!-- 中间内容 -->
		<section class="content container-fluid" id="content">
			<table class="table table-bordered table-hover">
				<tr class="text-warning">
					<th class="text-center">序&nbsp;&nbsp;号</th>
					<th class="text-center">姓&nbsp;&nbsp;名</th>
					<th class="text-center">部&nbsp;&nbsp;门</th>
					<th class="text-center">职&nbsp;&nbsp;位</th>
					<th class="text-center" v-if="w>1000">学&nbsp;&nbsp;号</th>
					<th class="text-center" v-if="w>1200">手&nbsp;&nbsp;机</th>
					<th class="text-center" v-if="w>1400">Q&nbsp;&nbsp;Q</th>
					<th class="text-center" v-if="w>1600">邮&nbsp;&nbsp;箱</th>
					<th class="text-center">操&nbsp;&nbsp;作</th>
				</tr>
				<tr class="text-center" v-for="(v,k) in users" v-cloak>
					<td>{{v.id}}</td>
					<td>{{v.name}}</td>
					<td>{{v.branch}}</td>
					<td>{{v.position}}</td>
					<td v-if="w>1000">{{v.CSUid}}</td>
					<td v-if="w>1200">{{v.phone}}</td>
					<td v-if="w>1400">{{v.qq}}</td>
					<td v-if="w>1600">{{v.email}}</td>
					<td>
						<button class="btn btn-primary btn" data-toggle="modal" data-target="#detailModal"
						        @click="gets(k)">详细资料
						</button>
					</td>
				</tr>
				<tr>
					<td colspan="7" class="text-center text-muted" v-if="users.length==0">
						<p>暂无数据....</p>
					</td>
				</tr>
			</table>
			<!--------------------------
			  | Your Page Content Here |
			  -------------------------->

			<!-- 详细资料 -->
			<div class="modal fade bs-example-modal-sm" id="detailModal" tabindex="-1" role="dialog"
			     aria-labelledby="detailModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">{{focus.name}} 的名片</h4>
						</div>
						<div class="modal-body">
							<div class="user_info">
								<table class="user_info_table">
									<tr>
										<td class="left_profile">
											<div>
												<img :src="focus.qqimg" class="profile">
											</div>
										</td>
										<td>
											<div class="right_info">
												<table>
													<tr>
														<th>序号</th>
														<td>{{focus.id}}</td>
													</tr>
													<tr>
														<th>姓名</th>
														<td>{{focus.name}}</td>
													</tr>
													<tr>
														<th>学号</th>
														<td>{{focus.CSUid}}</td>
													</tr>
													<tr>
														<th>部门</th>
														<td>{{focus.branch}} - {{focus.position}}</td>
													</tr>
													<tr>
														<th>Q&nbsp;Q</th>
														<td>{{focus.qq}}</td>
													</tr>
													<tr>
														<th>邮箱</th>
														<td>{{focus.email}}</td>
													</tr>
													<tr>
														<th>手机</th>
														<td>{{focus.phone}}</td>
													</tr>
												</table>
											</div>
										</td>
									</tr>
								</table>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-warning" data-toggle="modal"
							        data-target="#changeModal">修改信息
							</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div>
				</div>
			</div>


			<!-- 修改信息 -->
			<div class="modal fade bs-example-modal-sm" id="changeModal" tabindex="-1" role="dialog"
			     aria-labelledby="detailModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">修改 {{focus.name}} 的信息</h4>
						</div>
						<div class="modal-body">
							<div class="user_info">
								<table class="user_info_table">
									<tr>
										<td class="left_profile">
											<div>
												<img :src="focus.qqimg" class="profile">
											</div>
										</td>
										<td>
											<div class="right_info">
												<table>
													<tr>
														<th>序号</th>
														<input v-bind="focus.id">
													</tr>
													<tr>
														<th>姓名</th>
														<input v-bind="focus.name">
													</tr>
													<tr>
														<th>学号</th>
														<input v-bind="focus.CSUid">
													</tr>
													<tr>
														<th>部门</th>
														<td>{{focus.branch}} - {{focus.position}}</td>
													</tr>
													<tr>
														<th>Q&nbsp;Q</th>
														<input v-bind="focus.qq">
													</tr>
													<tr>
														<th>邮箱</th>
														<input v-bind="focus.email">
													</tr>
													<tr>
														<th>手机</th>
														<input v-bind="focus.phone">
													</tr>
												</table>
											</div>
										</td>
									</tr>
								</table>
							</div>
						</div>
						<div class="modal-footer">
							<!--							<button type="button" class="btn btn-waring">Save changes</button>-->
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div>
				</div>
			</div>


		</section>
	</div>
	<!-- 页脚 -->
	<footer class="main-footer">
		<!-- 右侧 -->
		<div class="pull-right hidden-xs">
			Designed By Coders
		</div>
		<!-- 左侧 -->
		<strong>Copyright &copy; 2001-2017 <a href="http://54sh.csu.edu.cn/">中南大学升华网</a>.</strong> 版权所有.
	</footer>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="<?php echo LIB_RES ?>jquery/jquery-3.2.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?php echo LIB_RES ?>bootstrap/js/bootstrap.min.js"></script>
<!-- toastr -->
<script src="<?php echo LIB_RES ?>toastr/toastr.min.js"></script>
<!-- AdminLTE -->
<script src="<?php echo LIB_RES ?>AdminLTE/js/adminlte.js"></script>
<!-- Vue -->
<script src="<?php echo LIB_RES ?>vue/vue.js"></script>
<script src="<?php echo LIB_RES ?>vue/vue-resource.js"></script>
<script src="<?php echo LIB_RES ?>vue/vue-router.js"></script>
<!-- crypto -->
<script src="<?php echo LIB_RES ?>crypto-js/crypto-js.js"></script>
<!-- Myself -->
<script>
	let WEB_ROOT = '<?php echo WEB_ROOT ?>';
	window.onload = function () {
		let vm = new Vue({
			el: "#content",
			data: {
				users: {},
				focus: -1,
				w: document.body.scrollWidth,
			},
			methods: {
				gets: function (k) {
					this.focus = this.users[k];
				}
			},
			beforeCreate: function () {
				this.$http.post(WEB_ROOT + 'stuff/admin/users.html', {}).then(function (res) {
					if (res.data === false) {
						toastr.error("系统异常!请联系管理员!");
					} else {
						this.users = res.data;
					}
				}, function () {
					toastr.warning("网络异常,请稍后再试!");
				})
			},
			created: function() {
				console.log(this.w);
			}
		});
	}
</script>

</body>
<link href="<?php echo STC_RES ?>stuff/css/shMain.css" rel="stylesheet">

<style>

</style>
</html>

